<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 当vue还没加载完时，让app display:none */
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <!-- v-cloak可以设置还没加载好vue之前的状态 -->
    <div id="app" v-cloak>
        <h1>{{msg}}</h1>
        <!-- v-text 渲染文本 -->
        <h1 v-text="mag"></h1>
        <!-- v-html渲染html -->
        <h1 v-html="mag_html"></h1>
        <!-- v-pre跳过模板编译过程 -->
        <h2 v-pre="mag"></h2>
        <!-- v-once 只编译一次 后面如果数据发生变化 不用再次编译  -->
        <h2 v-once>{{mag}}</h2>
        <button @click="btnClick">改变mag的值</button>

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm=new Vue({
            el:"#app",
            data:{
                mag:"/(ㄒoㄒ)/~~",
                mag_html:"<input style='color:red' value='红色'></input>",
            },
            methods:{
                btnClick:function(){
                    this.mag="lay"
                }
            }




        })







    </script>

</body>
</html>